/*
 * @Author: hongbin
 * @Date: 2022-04-29 00:17:24
 * @LastEditors: hongbin
 * @LastEditTime: 2022-04-30 00:06:36
 * @Description:第三块 波浪 宣传语
 */
import { FC, ReactElement } from "react";
import Lottie from "react-lottie-player";
import styled, { css } from "styled-components";
import { rangeTrans } from "../../utils";
import { Wave as WaveSvg } from "../Icon";
import devLottieJson from "../../assets/development.json";

interface IProps {
  threePercent: number;
}

const Wave: FC<IProps> = ({ threePercent }): ReactElement => {
  return (
    <FixedBox
      style={{
        top: `${rangeTrans(threePercent * 4, [100, 0])}vh`,
        opacity:
          threePercent > 0.68
            ? rangeTrans((threePercent - 0.7) * 3, [1, 0])
            : rangeTrans(threePercent * 4, [0, 1]),
        transform: `${
          threePercent > 0.68
            ? `skew(${(threePercent - 0.68) * 130}deg, ${
                (threePercent - 0.68) * 130
              }deg) translateX(${(threePercent - 0.68) * 500}vw)`
            : "none"
        }`,
        zIndex: 1,
      }}
    >
      <WaveWrap showIndex={9 - Math.floor(threePercent * 30)}>
        {WaveSvg}
      </WaveWrap>
      <Lottie
        loop
        animationData={devLottieJson}
        play
        style={{
          width: "20vmax",
          height: "20vmax",
          bottom: `${rangeTrans(threePercent * 2, [-14, 10])}vmin`,
          position: "absolute",
          left: "10vmax",
        }}
      />

      {threePercent > 0.3 ? (
        <>
          <Title
            style={{
              bottom: "60vh",
              left: rangeTrans(threePercent * 3, [100, 30]) + "vw",
              opacity: rangeTrans(threePercent * 2, [-1, 1]),
            }}
          >
            提升开发效率
          </Title>
          <Title
            style={{
              bottom: "40vh",
              opacity: rangeTrans(threePercent * 1.5, [-1, 1]),
            }}
          >
            专注业务
          </Title>
          <Title
            style={{
              bottom: "20vh",
              opacity: rangeTrans(threePercent * 1.3, [-1, 1]),
            }}
          >
            减少心智负担
          </Title>
        </>
      ) : null}
    </FixedBox>
  );
};

export default Wave;

const FixedBox = styled.div`
  position: fixed;
  height: 100vh;
  width: 100vw;
  ${(props) =>
    props.theme.mode === "dark" &&
    css`
      filter: brightness(0.5);
    `}
`;

const windowColorMatch = css`
  :nth-child(1) {
    fill: #a05ee1;
  }
  :nth-child(2) {
    fill: #8037c9;
  }
  :nth-child(3) {
    fill: #994fe2;
  }
  :nth-child(4) {
    fill: #a85ef1;
  }
  :nth-child(5) {
    fill: #b56cff;
  }
  :nth-child(6) {
    fill: #b874fb;
  }
  :nth-child(7) {
    fill: #a96ae5;
  }
  :nth-child(8) {
    fill: #af6cef;
  }
  :nth-child(9) {
    fill: #bc7af5;
  }
  :nth-child(10) {
    fill: #b66ef3;
  }
  :nth-child(11) {
    fill: #bd77f8;
  }
`;

const WaveWrap = styled.div<{ showIndex: number }>`
  position: fixed;
  bottom: 0;
  svg {
    width: 100vw;
    height: 100vh;
    rect {
      fill: ${window.primary};
    }
    path {
      transition: fill 0.2s linear;
      ${!window.IsMacSystem && windowColorMatch};
      ${({ showIndex }) => {
        let select = "";
        while (showIndex > 0) {
          select += `:nth-child(${showIndex}){fill: ${window.primary};}`;
          showIndex--;
        }
        return select;
      }};
    }
  }
`;
const Title = styled.strong`
  color: ${(props) => props.theme.lightText};
  font-size: 3vmax;
  letter-spacing: 2px;
  position: fixed;
  left: 30vw;
`;
